<template>
  <div class="ProductDetail">
    <!-- 商品详情页{{ $route.query.id }} 获取id -->

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 30天无忧退货... -->
    <Tips />

    <div class="info">
      <h2>{{ info.name }}</h2>
      <div>{{ info.goods_brief }}</div>
      <div class="price">{{ "￥" + info.retail_price + "元" }}</div>
    </div>

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '38%' }">
      <div class="top">
        <img :src="imgSrc" alt="" />
        <div class="price">
          <p>价格：￥29.00元</p>
          <p>库存：100</p>
        </div>
      </div>

      <div class="number">数量:</div>
      <div class="step">
        <div><button>-</button></div>
        <div class="stepNum">{{ num }}</div>
        <div><button>+</button></div>
      </div>
    </van-popup>
    <!-- 商品参数 -->
    <div class="parameter">
      <h3>商品参数</h3>
      <div
        class="parameter-content"
        v-for="(item, index) in attribute"
        :key="index"
      >
        <span class="name">{{ item.name }}</span>
        <span class="value van-ellipsis">{{ item.value }}</span>
      </div>
    </div>

    <div class="goodsDesc" v-html="info.goods_desc"></div>
    <!-- 常见问题 -->
    <van-divider>
      <div class="font">常见问题</div>
    </van-divider>
    <ul class="question">
      <li v-for="item in issue" :key="item.id">
        <div class="title">
          <div class="point"></div>
          <b>{{ item.question }}</b>
        </div>
        <p>
          {{ item.answer }}
        </p>
      </li>
    </ul>

    <!-- 相关产品 -->
    <van-divider>
      <div class="font">相关产品</div>
    </van-divider>
    <Products :goodsList="goodsList" />

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon
        :icon="iscolorshow ? 'star' : 'star-o'"
        :text="iscolorshow ? '已收藏' : '未收藏'"
        :color="iscolorshow ? '#ee0a24' : '#666'"
        @click="hdClickColl"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="isLogin ? badgeNum : 0"
        @click="$router.push('/cart')"
      />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addToCart"
      />
    </van-goods-action>

    <!-- 点击立即购买弹出SKU -->
    <van-sku
      v-model="isShowSku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      ref="sku"
    />
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import Products from "@/components/Products";
import assets from "@/assets/avatar.png";

import {
  GetGoodsDetail,
  GetRelated,
  GetCartNumber,
  ToAddCart,
} from "@/request/api";
export default {
  data() {
    return {
      //购物车
      badgeNum: "",
      //SKU数据
      isShowSku: false,
      sku: {
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        tree: [],
        hide_stock: false, //是否隐藏剩余库存
      },
      goods: {
        //默认商品 SKU 缩略图
        picture: "",
      },
      //-----------------
      iscolorshow: false,
      show: false,
      gallery: [],
      num: 1,
      imgSrc: assets,
      info: "",
      attribute: [],
      issue: [],
      goodsList: [],
      productList: [],
      isLogin: false,
    };
  },

  created() {
    let topen = localStorage.getItem("token");
    if (topen) {
      this.isLogin = true;
    }
    //请求商品详情信息
    GetGoodsDetail({
      id: this.$route.query.id,
    }).then((res) => {
      //详情页展示数据
      this.gallery = res.data.gallery;
      this.info = res.data.info;
      this.attribute = res.data.attribute;
      this.issue = res.data.issue;

      //sku数据处理
      this.sku.price = res.data.info.retail_price;
      this.sku.price = res.data.info.retail_price;
      this.sku.stock_num = res.data.info.goods_number;
      this.goods.picture = res.data.info.list_pic_url;

      //productList数组
      this.productList = res.data.productList;
      // console.log(res.data.productList[0].id);
    });
    GetRelated({
      id: this.$route.query.id,
    }).then((res) => {
      this.goodsList = res.data.goodsList;
      // console.log(res.data.goodsList[0].id);
      //  console.log(res);
    });
    GetCartNumber().then((res) => {
      this.badgeNum = res.data.cartTotal.goodsCount;
    });
  },
  methods: {
    hdClickColl() {
      let token = localStorage.getItem("token");
      if (!token) {
        this.$toast("请先登录，再进行收藏");
        setTimeout(() => {
          this.$router.push("/user");
        }, 1000);
        return;
      }
      this.iscolorshow = !this.iscolorshow;
    },
    showPopup() {
      this.show = true;
    },
    addToCart() {
      // 如果没有登录就跳转到登录页面
      // let token = localStorage.getItem("token");
      // if (!token) {
      //   this.$toast("请先登录，再添加到购物车");
      //   setTimeout(() => {
      //     this.$router.push("/user");
      //   }, 1000);
      //   return;
      // }
      let ret = this.utils.mustBeLogin();
      if (!ret) return;

      //点击了'加入购物车'按钮 执行这里的代码
      //需要先判断sku是否展示，如果展示了，才能真正执行加入购物车的操作。如果没有展示，就展示sku
      if (this.isShowSku) {
        //真正执行加入购物车的操作

        //获取用户选择的商品的数量，这个数据在sku对象中获取
        let counts = this.$refs.sku.getSkuData().selectedNum;

        ToAddCart({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: counts,
        }).then((res) => {
          this.badgeNum = res.data.cartTotal.goodsCount;
        });
      }
      this.isShowSku = !this.isShowSku;
    },
  },
  components: {
    Products,
    Tips,
  },
};
</script>
 
<style lang = "less" scoped>
.ProductDetail {
  padding-bottom: 0.5rem;
}
.van-swipe-item {
  img {
    display: block;
  }
}

.info {
  text-align: center;
  line-height: 0.4rem;
  background-color: #fff;
  height: 1.6rem;
  padding: 0.25rem;
  box-sizing: border-box;
  h2 {
    font-size: 0.18rem;
  }
  .price {
    color: darkred;
  }
}
.top {
  display: flex;
  .price {
    padding-top: 0.15rem;
    padding-left: 0.15rem;
    line-height: 0.5rem;
  }
}
.number {
  padding: 0.13rem;
  font-size: 0.2rem;
}
.step {
  display: flex;
  margin-left: 0.1rem;
  .stepNum {
    margin: 0 0.02rem;
    background-color: #efefef;
    line-height: 30px;
    text-align: center;
    width: 30px;
    height: 30px;
  }
  button {
    border: none;
    width: 30px;
    height: 30px;
  }
}
.van-cell {
  border-top: 1px solid #ccc;
}
.parameter {
  padding: 0.2rem 0.1rem 0.2rem 0.1rem;
  h3 {
    font-size: 0.2rem;
    padding-bottom: 0.1rem;
  }
  margin-top: 0.2rem;
  background-color: #fff;
  .parameter-content {
    display: flex;
    background-color: #f4f4f4;
    margin-top: 0.05rem;
    border-radius: 0.133333rem;
    padding: 0.1rem 0rem 0.1rem 0rem;
    .name {
      flex: 3;
      color: #9999;
      text-align: right;
    }
    .van-ellipsis {
      margin-left: 0.05rem;
      flex: 8;
      text-align: left;
    }
  }
}
/deep/.goodsDesc {
  img {
    display: block;
    width: 100%;
  }
}
.font {
  font-size: 0.2rem;
  color: black;
}
/deep/.van-divider--hairline::after,
.van-divider--hairline::before {
  transform: scaleY(5);
}
/deep/.van-divider--content-center::before,
.van-divider--content-left::before,
.van-divider--content-right::before {
  margin-left: 90px;
}
/deep/.van-divider--content-center::after,
.van-divider--content-left::after,
.van-divider--content-right::after {
  margin-right: 90px;
}
.question {
  padding-left: 0.1rem;
  .title {
    display: flex;
    font-size: 0.15rem;
  }
  .point {
    width: 0.04rem;
    height: 0.04rem;
    border-radius: 50%;
    background-color: darkred;
    box-sizing: border-box;
    margin-top: 0.05rem;
    margin-right: 0.04rem;
  }
  p {
    color: #666666;
    padding: 0.1rem;
  }
}
.van-goods-action {
  z-index: 9999;
}
.van-sku-container {
  min-height: auto;
}
/deep/.van-sku-messages {
  padding: 0;
}
/deep/.van-sku__stepper-title,
/deep/.van-sku__stepper {
  float: none;
}
</style>